<template>
	<view class="bg">
		<view class="my-order">
			<view class="order-header" >
				<view
				
				v-for="(tab,index) in tabBars" 
				:key="tab.id"
				:id="tab.id" 
				:data-current="index"
				 @click="ontabtap"
					class="header-item"
					:class=' tabIndex == index?"active":"" '
					
				>{{tab.name}}</view>
			</view>
			
			<!-- <block
				v-for='(value, index) in listData'
				:key='index'
			> -->
				<!-- <view v-show='index === tabIndex'> -->
					<view class="" >
					<view v-for='(value, index) in listData' :key="index"  class="order-main" @tap="goOrderDetails()">
						<!-- 商品  v-for='(k,i) in tabItem.list' :key="i" -->
						<view class="order-goods">
							<view class="num-status">
								<view class="order-num">订单编号{{value.order_no.substring(0,28)}}</view>
								<view class="goods-status">{{value.status_text}}</view>
							</view>
							<view class="goods-item">
								<!-- v-for='(item,index) in k.goods_item'-->
								<view class="goods-content"
								>
									<image class="goods-img" :src="value.goods.image" mode="widthFix"></image>
									<view class="goods-text">
										<view class="goods-title">{{value.goods.title||'商品已下架'}}</view>
										<view class="goods-des">{{value.goods.title}}</view>
									</view>
									<view class="goods-n">
										<view class="goods-price">￥{{value.goods.price||"0.00"}}</view>
										<view class="goods-num">X{{value.number}}</view>
									</view>
								</view>
							</view>
							
							<!-- 总价 -->
							<view class="total-price">
								合计：<text>￥{{value.number*value.goods.price}}</text>
							</view>
							<!-- 支付 -->
							<!-- <view class="payment">
								<view class="payment-text">支付</view>
							</view> -->
						</view>
						
					</view>
			
					<view v-if='listData.length=="0"' class="no-order">
						<image class="no-order-img" src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/shop/No orders.png" mode="widthFix"></image>
						<view class="no-order-home">暂时没有订单</view>
					</view>
				</view>
				<!-- </view> -->
			<!-- </block> -->
		</view>
	</view>
</template>

<script>
	let App = getApp()
	export default {
		data() {
			return {
				// 当前位置
				tabIndex:0,
				// 顶部选项卡数据
				tabBars:[
					{
						name:"全部",
						id:'all'
						// list:[
						// 	{
						// 		status:"待付款",
						// 		ddnum:"YZD123123123123",
						// 		totalPrice:"2093.00",
						// 		goods_item:[
						// 			{
						// 				imgUrl:"../../../static/shop/goods.png",
						// 				name:"【限量销售】云支点多功能路由器",
						// 				attrs:"标准",
						// 				price:"299.00",
						// 				num:"1"
						// 			},
						// 			{
						// 				imgUrl:"../../../static/shop/goods.png",
						// 				name:"【限量销售】云支点多功能路由器",
						// 				attrs:"标准",
						// 				price:"299.00",
						// 				num:"6"
						// 			}
						// 		],
						// 	}
						// ]
						
					},
					{
						name:"待付款",
						id:'no'
					},
					{
						name:"待发货",
						id: 'yes'
					},
					{
						name:"已发货",
						id: 'ok'
					},
					{
						name:"售后",
						id: 'nook'
					},
				],
				listData: [],
				page:1,
				brandName:'',
				// name:''
			}
		},
		onLoad() {
			this.brandName = App.globalData.name
			this.getList(this.page,this.tabIndex);
		},
		onShow(option) {
			// this.status = uni.getStorageSync('equValue');
			this.tabIndex = uni.getStorageSync('orderIndex')*1;
			// this.brandName = App.globalData.name
			// this.getGroupList();
			// this.showType = false;
		},
		onPullDownRefresh() {
			
		},
		onReachBottom() {
			this.getList(this.page*1+1,this.tabIndex);
		},
		methods: {
			//顶部切换
			changeTab(index){
				this.tabIndex=index;
				this.page = 1
				let userinfo = uni.getStorageSync('userinfo');
			},
			goOrderDetails(){
				uni.navigateTo({
					url:("/pages/mine/orderDetails"),
				})
			},
			getList(page,index) {
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				},2000)
				this.$api.interfaceApi('getOrder')({
					'uid':userinfo.id,
					'page':page,
					'status':index
				}).then(res=>{
					if(res.code == 200){
						this.listData =  this.listData.concat(res.data.list)
						this.page = res.data.page
						console.log(res)
						console.log(this.listData)
						console.log(this.listData.length)
					}
					uni.hideLoading()
				})
			},
			
			ontabtap(e) {
			    let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.tabIndex = index
				this.page=1;
				this.listData = []
			    this.getList(this.page,index);
			}
		}
	}
</script>

<style>

	.bg{
		background-color:#f1f1f1;
	}
	.order-header{
		display: flex;
		justify-content: center;/* 居中 */
		align-items: center;
		border-bottom: 2rpx solid #dddddd;
		background-color: #fff;
		height: 6vh;
	}
		.header-item{
			text-align: center;
			flex:1;
			line-height: 100rpx;
		}
		.active{
			color: #0055ff;
		}
		.no-order{
			display: flex;
			flex-direction: column;
			justify-content:center;
			align-items: center;
			width: 100%;
			height: 92vh;
			/* margin: 400rpx 150rpx 300rpx 150rpx; */
			/* padding: 0rpx 25rpx 380rpx 25rpx ; */
		}
		.no-order-img{
			justify-content:center;
			align-items: center;
			background-size: cover;
			width: 380rpx;
			height: 180rpx;
		}
		.no-order-home{
			font-size: 48rpx;
			color: #b5b5b5;
			/* margin: 150rpx 0rpx; */
		}
		/* 订单列表 */
		.order-main{
			background-color: #f1f1f1;
			padding-bottom: 1rpx;
		}
			.order-goods{
				background-color: #fff;
				margin: 20rpx 0rpx;
				padding: 10rpx;
			}
				.num-status{
					display: flex;
					align-items: center;
					border-bottom:2rpx solid #dddddd;
				}
					.order-num{
						width: 72%;
						margin-left: 10rpx;
						padding: 20rpx;
					}
					.goods-status{
						
						display: flex;
						justify-content: flex-end;
						background-color: #fff;
						padding: 20rpx ;
						color: #ff5500;
					}
				.goods-content{
					display: flex;
					padding: 20rpx;
					border-bottom:2rpx solid #eaeaea;
				}
					.goods-img{
						width: 28%;
						height: 175rpx;
						padding: 10rpx 10rpx;
					}
					.goods-text{
						padding: 15rpx;
						overflow: hidden;
					}
						.goods-title{
							font-size: 28rpx;
							padding: 10rpx;
						}
						.goods-des{
							color: #8a8a8a;
							padding: 10rpx;
						}
				.goods-n{
					padding: 20rpx;
				}
					.goods-price{
						padding: 20rpx;
					}
					.goods-num{
						padding: 20rpx;
						text-align: right;
					}
					
			.total-price{
				display: flex;
				justify-content: flex-end;
				background-color: #fff;
				padding: 15rpx;
				margin-bottom: 2rpx;
			}
			.payment{
				display: flex;
				justify-content: flex-end;
				background-color: #fff;
				padding: 20rpx;
			}
			.payment-text{
				border: 2rpx solid #ff5500;
				color: #ff5500;
				background-color: #fff;
				padding: 10rpx 30rpx;
				border-radius: 25rpx;
			}
</style>
